<template>
    <div class="quarter-selector">
        <div class="quarter-input-container">
            <el-popover placement="bottom-start" :width="240" trigger="click" v-model:visible="popoverVisible"
                popper-class="quarter-popover">
                <template #reference>
                    <div class="quarter-input">
                        <span class="quarter-value">{{ selectedQuarter }}</span>
                        <el-icon class="quarter-icon">
                            <Calendar />
                        </el-icon>
                    </div>
                </template>

                <div class="quarter-picker">
                    <!-- 年份选择 -->
                    <div class="year-selector">
                        <el-select v-model="currentYear" class="year-select">
                            <el-option v-for="year in yearOptions" :key="year" :label="year" :value="year" />
                        </el-select>

                        <div class="year-navigation">
                            <el-button size="small" :icon="ArrowLeft" @click="previousYear" class="nav-btn" />
                            <el-button size="small" :icon="Refresh" @click="goToCurrentYear" class="nav-btn" />
                            <el-button size="small" :icon="ArrowRight" @click="nextYear" class="nav-btn" />
                        </div>
                    </div>

                    <!-- 季度选择 -->
                    <div class="quarter-options">
                        <div v-for="quarter in quarters" :key="quarter.value"
                            :class="['quarter-option', { selected: selectedQuarterValue === quarter.value }]"
                            @click="selectQuarter(quarter.value)">
                            {{ quarter.label }}
                        </div>
                    </div>
                </div>
            </el-popover>

            <span class="date-range">{{ dateRange }}</span>
        </div>
    </div>
</template>
<script setup>
import { ref, computed, watch } from 'vue'
import { Calendar, ArrowLeft, ArrowRight, Refresh } from '@element-plus/icons-vue'

const props = defineProps({
    modelValue: {
        type: String,
        default: ''
    }
})
const emit = defineEmits(['update:modelValue', 'change'])

const popoverVisible = ref(false)
const currentYear = ref(new Date().getFullYear())
const selectedQuarterValue = ref('Q1')

const quarters = [
    { label: '一季度', value: 'Q1' },
    { label: '二季度', value: 'Q2' },
    { label: '三季度', value: 'Q3' },
    { label: '四季度', value: 'Q4' }
]

const yearOptions = computed(() => {
    const current = new Date().getFullYear()
    return Array.from({ length: 11 }, (_, i) => current - 5 + i)
})

const selectedQuarter = computed(() => `${currentYear.value}-${selectedQuarterValue.value}`)

const dateRange = computed(() => {
    const year = currentYear.value
    const map = {
        Q1: { start: '01-01', end: '03-31' },
        Q2: { start: '04-01', end: '06-30' },
        Q3: { start: '07-01', end: '09-30' },
        Q4: { start: '10-01', end: '12-31' }
    }
    const range = map[selectedQuarterValue.value]
    return `${year}-${range.start} 至 ${year}-${range.end}`
})

const selectQuarter = (quarter) => {
    selectedQuarterValue.value = quarter
    const value = `${currentYear.value}-${quarter}`
    emit('update:modelValue', value)
    emit('change', {
        year: currentYear.value,
        quarter,
        value,
        dateRange: dateRange.value
    })
    popoverVisible.value = false
}

const previousYear = () => {
    currentYear.value--
    emitChange()
}
const nextYear = () => {
    currentYear.value++
    emitChange()
}
const goToCurrentYear = () => {
    currentYear.value = new Date().getFullYear()
    emitChange()
}

function emitChange() {
    const value = `${currentYear.value}-${selectedQuarterValue.value}`
    emit('update:modelValue', value)
    emit('change', {
        year: currentYear.value,
        quarter: selectedQuarterValue.value,
        value,
        dateRange: dateRange.value
    })
}

// 新增：监听 currentYear 下拉选择变化
watch(currentYear, () => {
    emitChange()
})

watch(
    () => props.modelValue,
    (newVal) => {
        if (newVal) {
            const [year, quarter] = newVal.split('-')
            if (year && quarter) {
                currentYear.value = parseInt(year)
                selectedQuarterValue.value = quarter
            }
        } else {
            const value = `${currentYear.value}-Q1`
            emit('update:modelValue', value)
            emit('change', {
                year: currentYear.value,
                quarter: 'Q1',
                value,
                dateRange: dateRange.value
            })
        }
    },
    { immediate: true }
)
</script>

<style scoped>
.quarter-selector {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quarter-input-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.quarter-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 12px;
    border: 2px solid #409eff;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    min-width: 120px;
    transition: all 0.2s ease;
}

.quarter-input:hover {
    border-color: #66b1ff;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

.quarter-value {
    font-size: 14px;
    color: #303133;
    font-weight: 500;
}

.quarter-icon {
    color: #409eff;
    font-size: 16px;
}

.date-range {
    /* font-size: 14px; */
    /* color: #666; */
}

.quarter-picker {
    /* padding: 2px; */
}

.year-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.year-select {
    width: 100px;
}

.year-navigation {
    display: flex;
    gap: 2px;
}

.nav-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quarter-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
}

.quarter-option {
    padding: 1px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    color: #606266;
    background: white;
}

.quarter-option:hover {
    border-color: #409eff;
    color: #409eff;
    background: #ecf5ff;
}

.quarter-option.selected {
    background: #409eff;
    border-color: #409eff;
    color: white;
}

:deep(.quarter-popover) {
    padding: 0 !important;
}

:deep(.el-select .el-input__wrapper) {
    box-shadow: none;
    border: 1px solid #dcdfe6;
}
</style>
